<template>
  <div class="edit-member-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="800px">
      <div class="title" slot="title">{{memberInfo.id?'编辑会员档案':'新增会员档案'}}</div>
      <div class="edit-content">
        <div class="line">
          <div class="line-item">
            <div class="label"><span class="required">*</span><span>持卡人姓名</span></div>
            <div class="input">
              <el-input v-model="memberInfo.name" placeholder="请输入"/>
            </div>
          </div>
          <div class="line-item">
            <div class="label"><span class="required">*</span><span>出生日期</span></div>
            <div class="input">
              <el-date-picker style="width: 100%" v-model="memberInfo.birthday" type="date" placeholder="选择日期"
                              value-format="yyyy-MM-dd"/>
            </div>
          </div>
        </div>
        <div class="line">
          <div class="line-item">
            <div class="label"><span class="required">*</span><span>性别</span></div>
            <div class="input">
              <el-select v-model="memberInfo.sex" placeholder="请选择" style="width: 100%">
                <el-option label="男" value="man"/>
                <el-option label="女" value="women"/>
              </el-select>
            </div>
          </div>
          <div class="line-item">
            <div class="label"><span class="required">*</span><span>手机号码</span></div>
            <div class="input">
              <el-input v-model="memberInfo.phone" placeholder="请输入"/>
            </div>
          </div>
        </div>
        <div class="line">
          <div class="line-item">
            <div class="label"><span class="required">*</span><span>会员卡</span></div>
            <div class="input">
              <el-select v-model="memberInfo.cardInfo" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in cardRank" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </div>
          </div>
          <div class="line-item">
            <div class="label"><span>家庭成员</span></div>
            <div class="input">
              <div class="input-content">
                <el-input v-model="memberInfo.family" placeholder="请输入" disabled/>
                <span class="input-span" @click="editFamily">修改</span>
              </div>
              <div style="font-size: 12px;color: #FF6F35;position: absolute">绑定家庭成员，共享会员卡优惠、余额、积分</div>
            </div>
          </div>
        </div>
        <div class="line1">
          <div class="label"><span>备注</span></div>
          <div class="input">
            <el-input v-model="memberInfo.remark" type="textarea" placeholder="请输入"/>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <edit-family-member @selectFamilyMember="selectFamilyMember" ref="editFamily"/>
  </div>
</template>

<script>
import EditFamilyMember from './editFamilyMember'
import { validatenull } from '@/utils/validate'
import Vue from 'vue'

export default {
  name: 'editMember',
  components: { EditFamilyMember },
  data () {
    return {
      dialogVisible: false,
      checked: false,
      memberInfo: {},
      cardRank: [
        { value: 'guibing', label: '贵宾' },
        { value: 'normal', label: '普通' }
      ],
      cardStatus: [
        { value: 'close', label: '关闭' }
      ]
    }
  },
  methods: {
    show (memberId) {
      this.memberInfo = {}
      if (memberId) {
        this.memberInfo = { id: memberId, name: '来了1', type: '赠送', phone: '18888888' }
      }
      this.dialogVisible = true
    },
    selectFamilyMember (members) {
      console.log(members)
      Vue.set(this.memberInfo, 'family', '')
      if (!validatenull(members)) {
        const families = members.map(item => item.name).join(',')
        Vue.set(this.memberInfo, 'family', families)
      }
    },
    handleClose () {
      this.dialogVisible = false
    },
    editFamily () {
      this.$refs.editFamily.show()
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.edit-member-dialog {
  font-size: 14px;
  .title {
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 10px;
    font-size: 16px;
  }
  .edit-content {
    padding: 0 20px;
    margin-top: -30px;
    .line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      .line-item {
        display: flex;
        align-items: center;
        .label {
          width: 100px;
          text-align: right;
          .required {
            color: red;
          }
        }
        .input {
          margin-left: 10px;
          width: 220px;
          .input-content {
            display: flex;
            align-items: center;
            .input-span {
              flex-shrink: 0;
              margin-left: 5px;
              color: $mainBg;
              cursor: pointer;
            }
          }
        }
      }
    }
    .line1 {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .label {
        width: 100px;
        text-align: right;
      }
      .input {
        margin-left: 10px;
        width: 380px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
